import React, { useState } from 'react';
import { Form, Input, Button, Select, Table, Row, Col } from 'antd';
const { Option } = Select;

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

class SForm extends React.Component {
  formRef = React.createRef();
  /** 添加 */
  btnQuery = async () => {
    // const values = await this.formRef.current.validateFields(); // 触发表单验证
    const values = this.formRef.current.getFieldsValue();
    this.props.add(values);
    console.log(values);
    this.formRef.current.resetFields();
  };
  /** 重置 */
  onReset = () => {
    this.formRef.current.resetFields();
  };
  render() {
    return (
      <Form {...layout} ref={this.formRef} name="control-hooks">
        <Row>
          <Col span={8}>
            <Form.Item name="userName" label="用户名称">
              <Input placeholder='请输入用户名称' />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="userStatus" label="用户状态">
              <Select>
                <Option value='up'>上线</Option>
                <Option value='done'>下线</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item>
              <Button onClick={this.btnQuery} type="primary" htmlType="submit">
                添加
              </Button>
              <Button htmlType="button" onClick={this.onReset}>
                重置
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    )
  }

}

/**
 * 子组件-表格
 * @param dataList 表格数据
 * @returns 
 */
class STable extends React.Component {
  render() {
    const { dataList } = this.props;
    const columns = [
      {
        title: '用户姓名',
        dataIndex: 'userName',
        key: 'userName'
      },
      {
        title: '用户状态',
        dataIndex: 'userStatus',
        key: 'userStatus',
        render: (record) => record === 'up' ? '上线' : '下线'
      }
    ];
    return <Table dataSource={dataList} 
    columns={columns} 
    rowKey={(record) => record?.lendth + 1}
    />
  }

}

/** tableform表格实现 */
class TableForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tableData: [],
    }
  }
  /**
   * 添加方法
   * @param {*} formValue 表单参数
   */
  add = (values) => {
    let a =this.state.tableData.concat([values])
    this.setState({
      tableData: a,
    });
  }
  render() {
    return (
      <>
        <div style={{ marginTop: 40 }}>
          <SForm add={this.add} />
        </div>
        <div style={{ padding: 20 }}>
          <STable 
          dataList={this.state.tableData}
           />
        </div>
      </>
    )
  }

}
export default TableForm;






// import React, { Component } from 'react'
// import { Form, Input, Button, Select, Table, Row, Col } from 'antd';
// const { Option } = Select;
// const layout = {
//   labelCol: {
//     span: 8,
//   },
//   wrapperCol: {
//     span: 16,
//   },
// };
// export default class TablForm extends Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       tableData: [],
//     }
//     this.formRef = React.createRef();//用ref获取数据
//   }
//   btnQuery = async () => {//添加
//     const values = this.formRef.current.getFieldsValue();
//     console.log(values);
//     this.props.add(values);
//   };
//   onReset = () => {//重置
//     this.formRef.current.resetFields();
//   };
//   add = (values) => {
//     let a = this.state.tableData.concat([values])
//     this.setState({
//       tableData: a,
//     });
//     console.log(values);
//   };
//   render() {
//     // const { dataList } = this.props;
//     const columns = [
//       {
//         title: "用户姓名",
//         dataIndex: "userName",
//         key: "userName",
//       },
//       {
//         title: "用户状态",
//         dataIndex: "userStatus",
//         key: "userStatus",
//         render: (record) => (record === "up" ? "上线" : "下线"),
//       },
//     ];
//     return (
//       <>
//         <Form {...layout} ref={this.formRef} name="control-hooks">
//           <Row>
//             <Col span={8}>
//               <Form.Item name="userName" label="用户名称">
//                 <Input placeholder='请输入用户名称' />
//               </Form.Item>
//             </Col>
//             <Col span={8}>
//               <Form.Item name="userStatus" label="用户状态">
//                 <Select>
//                   <Option value='up'>上线</Option>
//                   <Option value='done'>下线</Option>
//                 </Select>
//               </Form.Item>
//             </Col>
//             <Col span={8}>
//               <Form.Item>
//                 <Button onClick={this.btnQuery} type="primary" htmlType="submit">
//                   添加
//                 </Button>
//                 <Button htmlType="button" onClick={this.onReset}>
//                   重置
//                 </Button>
//               </Form.Item>
//             </Col>
//           </Row>
//         </Form>
//         <Table
//           add={this.add}
//           dataSource={this.state.tableData}
//           columns={columns}
//           rowKey={(record) => record?.lendth + 1}
//         />
//       </>
//     )
//   }
// }




